<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地注册</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <model1></model1>
    <model2></model2>
</div>

<script>
    // 定义了一个组件对象
    let model1 = {
        // template: HTML内容
        template: "<div>" +
            "<h1>{{title}}</h1>" +
            "<button @click='alert'>点我</button>" +
            "</div>",
        data:function () {
            return {
                title: "本地注册的组件"
            };
        },
        methods:{
            alert:function () {
                alert("本地注册的组件");
            }
        }
    };
    // 定义一个简单的组件 可以只有template
    let model2 = {template: "<h2>MODEL2的内容</h2>"}

    new Vue({
        el:"#app",
        date:{},
        // 本地注册的组件，只能再当前vue绑定的元素上使用
        components:{model1,model2}
    });
</script>
</body>
</html>